<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    .caret {
      width: 0;
      height: 0;
      /* border-top: 4px solid; */
      border-right: 40px solid transparent;
      border-left: 40px solid transparent;
      border-bottom: 40px solid black;
    }
  </style>
  <script>
    myWorker = () => {
      var myWorker = new Worker('worker.js');
      console.log(myWorker);
    }


    setItem = () => {


      const obj = {
        name: 'kobe',
        age: 43
      }
      const strObj = "{name:'kobe', age:43}"
      window.localStorage.setItem('obj', obj)
      window.localStorage.setItem('objStr', strObj)
      console.log('==>');

      const getObj = window.localStorage.getItem('obj')
      const getObjStr = window.localStorage.getItem('objStr')

      // parse将对象转字符串.
      // stringfy将字符串转对象.

      //


      console.log('obj', typeof getObj)
      console.log('obj', JSON.stringify(getObj))
      console.log('objStr', typeof getObjStr)
      console.log('objStr', JSON.stringify(getObjStr))


      let xhr;
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
      } else if (window.ActiveXObject) {
        xhr = new ActiveXObject()
      }
      xhr.open('get', 'http://iwenwiki.com/api/blueberrypai/getIndexBanner.php')
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          const res = JSON.parse(xhr.responseText)
          console.log(res)
        }
      }
    }
  </script>
  <div class="caret" onclick="setItem()"> </div>
  <div class="caret" onclick="myWorker()"> </div>



  <div class="line"></div>
  <div style="height: 20px;width: 100vh;"></div>
  <div class="line divid"></div>
  <div style="height: 20px;width: 100vh;"></div>
  <div class="line divid1"></div>
</body>

<style>
  .line {
    height: 1px;
    width: 100%;
    background-color: black;
  }

  .divid {
    transform: scaleY(0.5);
  }

  .divid1 {
    height: 0.5px;
  }
</style>

</html>